<template>
  <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
    <div class="avue-header">
      <!-- 顶部导航栏 -->
      <top ref="top" />
    </div>
    <div class="avue-layout">
      <div class="avue-left">
        <!-- 左侧导航栏 -->
        <sidebar ref="siderBar" />
      </div>
      <!-- :class="[{ 'avue-breadcrumb--active': isCollapse }]"-->

      <div v-if="isCollapse" class="avue-breadcrumb">
        <i class="el-icon-s-unfold" @click="setCollapse"></i>
      </div>
      <div class="avue-main">
        <!-- 顶部标签卡 -->
        <topTab
          ref="topList"
          :style="{
            height: topHide ? '0' : '',
            visibility: topHide ? 'hidden' : 'visible',
            transition: 'all .2s'
          }"
          v-show="$store.state.pageStyle == '1'"
        ></topTab>
        <tags
          ref="indexTags"
          :style="{
            height: topHide ? '0' : '',
            visibility: topHide ? 'hidden' : 'visible',
            transition: 'all .2s'
          }"
        />

        <transition name="fade-scale">
          <search class="avue-view" v-show="isSearch"></search>
        </transition>
        <!-- 主体视图层 -->
        <div
          :style="{
            height: topHide ? 'calc(100% - 1.214rem)' : 'calc(100% - 8.357rem)',
            'overflow-y': auto,
            'overflow-x': hidden
          }"
          id="avue-view"
          v-show="!isSearch"
        >
          <keep-alive>
            <router-view class="avue-view" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
        </div>
      </div>
    </div>
    <div class="avue-shade" @click="showCollapse"></div>

    <el-dialog
      :class="['myDialog', 'avue-dialog', { miniDialog: noticeBoxShow }]"
      :destroy-on-close="true"
      :show-close="false"
      modal-append-to-body
      :visible.sync="dialogShow"
      :width="dialogWidth"
      :fullscreen="dialogFullscreen"
      :close-on-click-modal="false"
    >
      <template slot="title">
        <p :class="['dialogTitle', { dialogTitleBg: noticeBoxShow }]">
          <span style="margin-left: calc(20rem / 14)">{{ dialogTitle }}</span>
          <span>
            <i
              class="el-icon-full-screen"
              v-if="!dialogFullscreen"
              @click="dialogFullscreen = true"
            ></i>
            <i
              class="myfont icon-a-ziyuan72"
              v-else
              @click="dialogFullscreen = false"
            ></i>
            <i class="el-icon-close" @click="closeDialog"></i>
          </span>
        </p>
      </template>
      <!--  通知公告-->
      <notice v-if="noticeBoxShow"></notice>
    </el-dialog>
    <el-drawer
      title="系统设置"
      :visible.sync="drawerShow"
      :direction="drawerDirection"
      @closeDrawer="drawerClose"
    >
      <!-- 系统设置 -->
      <system-set v-if="isSystemSetShow"></system-set>
    </el-drawer>
    <el-drawer
      title="风格样式"
      :visible.sync="styleTypeShow"
      :direction="drawerDirection"
      @closeDrawer="drawerClose"
    >
      <!-- 风格样式 -->
      <style-tem-set v-if="styleTypeShow"></style-tem-set>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import tags from './tags'
import search from './search'
import top from './top/'
import sidebar from './sidebar/'
import admin from '@/util/admin'
import { validatenull } from '@/util/validate'
import { calcDate } from '@/util/date.js'
import { getStore } from '@/util/store.js'
import bottom from './bottom/bottom'
import topTab from './top/topTab'
import notice from './notice'
import website from '../../config/website'
import systemSet from '@/page/systemSet/systemSet'
import styleTemSet from '@/page/systemSet/styleTemSet'
import { isPc } from '../../util/util'
import { setTheme } from '@/util/util'

let time = null
export default {
  components: {
    top,
    tags,
    search,
    sidebar,
    bottom,
    topTab,
    styleTemSet,
    notice,
    systemSet
  },
  name: 'index',
  provide () {
    return {
      index: this
    }
  },
  data () {
    return {
      api_key: '3yo6ijgW',
      api_secret: 'zT2jXm7wCYWyrdkQjxdGGArMostbXThh',
      dialogTitle: '',
      dialogShow: false,
      dialogFullscreen: false,
      dialogWidth: '80%',
      loading: false,
      //搜索控制
      isSearch: false,
      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: '',
      //工具条是否展开
      isFull: false,
      //客服盒子是否打开
      intellCusSerBox: false,
      isChat: false, //是否人工服务
      //留言||客服
      isOnline: false,
      //客服盒子展示方式  1--小  2--收起  3--铺满全屏
      fullIntell: 1,
      //记录客服盒子收起前 是否为铺满全屏
      intellFull: false,
      //工具条是否显示
      rightBarShow: true,
      screenWidth: 0,
      screenHeight: 0,
      // isBusinessHall:false,//招标业务大厅是否弹出
      businessHallId: 0,
      hallTableD: [],
      img: '',
      imgBox: false,
      noteBoxShow: false,
      editBoxShow: false,
      noticeBoxShow: false,
      path: website.scocket,
      socket: '',
      freshLoginToken: null,
      drawerShow: false,
      isSystemSetShow: false,
      styleTypeShow: false,
      drawerDirection: 'rtl',
      isLandscape: !isPc(),
      halfWidth: (document.documentElement.clientHeight * 4) / 5 / 14 + 'rem',
      topHide: false,
      text: ''
    }
  },
  created () {
    //实时检测刷新token
    this.refreshToken()
    // this.turnWordLogin()
    this.refreshLoginToken()
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
      this.text = this.themeName
      if (!this.text) {
        this.text = ''
      }
    })
  },
  watch: {
    text: function (val) {
      this.$store.commit('SET_THEME_NAME', val)
      setTheme(val)
    }
  },
  computed: {
    ...mapGetters([
      'isMenu',
      'isLock',
      'isCollapse',
      'website',
      'menu',
      'themeName'
    ]),
    ...mapState({ showCollapse: state => state.common.showCollapse })
  },
  props: [],
  methods: {
    //webscoket
    webInit () {
      if (typeof WebSocket === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open () {
      console.log('socket连接成功')
    },
    error () {
      console.log('连接错误')
    },
    getMessage (msg) {
      console.log(msg.data)
    },
    send () {
      this.socket.send(params)
    },
    close () {
      console.log('socket已经关闭')
    },
    //Dialog框
    closeDialog () {
      this.dialogShow = false
      this.noteBoxShow = false
      this.editBoxShow = false
      this.noticeBoxShow = false
      this.imgBox = false
    },
    noticeShow () {
      this.dialogWidth = '50%'
      this.dialogShow = true
      this.noticeBoxShow = true
      this.dialogTitle = '重要通知'
    },
    systemSetShow () {
      this.drawerShow = true
      this.isSystemSetShow = true
    },
    toStyleSet () {
      this.styleTypeShow = true
      this.dialogTitle = '风格'
      this.dialogWidth = '80%'
    },
    editShow () {
      this.editBoxShow = true
      this.dialogShow = true
      this.dialogTitle = '功能设置'
      this.dialogWidth = '90%'
    },
    setCollapse () {
      this.$store.commit('SET_COLLAPSE')
    },
    showCollapse () {
      this.$store.commit('SET_COLLAPSE')
    },
    // 初始化
    init () {
      this.$store.commit('SET_SCREEN', admin.getScreen())
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit('SET_SCREEN', admin.getScreen())
        }, 0)
      }
      this.$store.dispatch('FlowRoutes').then(() => {})
    },
    //打开菜单
    openMenu (item = {}) {
      this.$store.dispatch('GetMenu', item.id).then(data => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true)
        }
      })
    },
    // 定时检测token
    refreshToken () {
      this.refreshTime = setInterval(() => {
        const token =
          getStore({
            name: 'token',
            debug: true
          }) || {}
        const date = calcDate(token.datetime, new Date().getTime())
        if (validatenull(date)) return
        if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
          this.refreshLock = true
          this.$store
            .dispatch('refreshToken')
            .then(() => {
              this.refreshLock = false
            })
            .catch(() => {
              this.refreshLock = false
            })
        }
      }, 10000)
    },
    //快速跳转topBar页码
    toTopBarPage (num) {
      let size = this.$refs.topList.pageSize
      let needIndex = Math.ceil(num / size)
      this.$refs.topList.numToPage(needIndex)
    },
    changeMineIntell () {
      this.intellCusSerBox = true
      this.fullIntell = this.intellFull ? 3 : 1
    },
    refreshLoginToken () {
      clearInterval(this.freshLoginToken)
      let th = this
      this.freshLoginToken = setInterval(function () {
        // th.turnWordLogin()
      }, 10 * 60 * 1000)
    },
    drawerClose () {
      this.drawerShow = false
      this.isSystemSetShow = false
      this.styleTypeShow = false
      //   done()
    },
    topHideChange () {
      this.topHide = !this.topHide
    }
  }
}
</script>
<style lang="scss" scoped>
.pointerDom {
  cursor: pointer;
}
.coll {
  position: fixed;
  top: 50%;
  right: 0px;
  z-index: 2020;
  width: 60px;
  height: 60px;
  text-align: center;
  opacity: 0.6;
  transition: all 0.5s linear 0s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  &:hover {
    opacity: 1;
  }
  i {
    color: #1c7df0;
    font-size: 36px;
    cursor: pointer;
    margin: 17px auto;
  }
  .el-icon-circle-plus {
    animation: shake 1s infinite alternate;
    &:hover {
      animation-play-state: paused;
      -webkit-animation-play-state: paused; /* Safari 和 Chrome */
    }
  }
  .rightBar {
    width: 36px;
    height: 36px;
    //   color: #fff;
    cursor: pointer;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    line-height: 36px;
  }
  .icon-wj-bal {
    font-size: 26px;
  }
  .icon-biji {
    font-weight: 700;
  }
}
@keyframes shake {
  0% {
    opacity: 0.5;
  }
  65% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
.collFull {
  opacity: 1;
  position: fixed;
  background: rgba(216, 216, 216, 0.6);
  box-shadow: 1px 4px 7px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  border: 0px solid #979797;
  margin-top: -176px;
}
.robotBox {
  width: 70px;
  height: 70px;
  z-index: 1026;
  right: 10px;
  bottom: 250px;
  position: absolute;
  /*background: rgba(0, 166, 128, 0.67);*/
  background: rgba(28, 125, 240, 0.6);
  border-radius: 50%;
  animation: robotAction 10s infinite alternate;
  &:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
  }
}
.robotAction {
  font-size: 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 5px;
}
@keyframes robotAction {
  0% {
    right: 10px;
    bottom: 250px;
  }
  25% {
    right: 50px;
    bottom: 250px;
  }
  30% {
    right: 50px;
    bottom: 250px;
  }
  45% {
    right: 10px;
    bottom: 250px;
  }
  50% {
    right: 10px;
    bottom: 250px;
  }
  65% {
    right: 10px;
    bottom: 120px;
  }
  70% {
    right: 10px;
    bottom: 120px;
  }
  85% {
    right: 10px;
    bottom: 250px;
  }
  90% {
    right: 10px;
    bottom: 250px;
  }
  100% {
    right: -10px;
    bottom: 250px;
  }
}
.intellBoxR {
  position: fixed;
  left: calc(100% - 374px);
  bottom: 10px;
  z-index: 2021;
}
.intellBoxA {
  position: fixed;
  z-index: 2021;
}
.intellBoxF {
  position: fixed;
  z-index: 2021;
  left: 0 !important;
  top: 0 !important;
}
.intellBox-mini {
  width: 60px;
  border-radius: 50%;
  position: absolute;
  bottom: 20px;
  right: -30px;
  z-index: 2021;
  /*background: #12ad8d99;*/
  /*box-shadow: 1px 1px 11px 8px #5ac1ab;*/
  background: rgba(28, 125, 240, 0.6);
  box-shadow: 1px 1px 11px 8px rgba(28, 125, 240, 0.6);
}
.imgboxBtn {
  padding: 0.5rem 1rem;
}
</style>
<style lang="scss">
.myDialog {
  .el-dialog {
    height: 80%;
    overflow: hidden;
  }
  .is-fullscreen {
    height: 100%;
  }
  .el-dialog__body {
    padding: 0;
    height: calc(100% - 90px);
    overflow: auto;
  }
  .dialogTitle {
    display: flex;
    justify-content: space-between;
    i {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.miniDialog {
  .dialogTitleBg {
    padding: 0 10px;
    margin: 0;
    height: 46px;
    line-height: 46px;
    color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .el-dialog {
    box-shadow: none;
    background: none;
    height: 60%;
  }
  .is-fullscreen {
    height: 100%;
  }
  .el-dialog__body {
    padding: 0;
    height: calc(100% - 46px);
    overflow: auto;
    background: #fff;
    box-shadow: 0px 1px 3px #0000004d;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .el-dialog__header {
    padding: 0;
  }
}
</style>
